<?php if(!class_exists("View", false)) exit("no direct access allowed");?><!-- 敏感词库管理页面 -->
<main class="flex-1 ml-64 flex flex-col h-screen overflow-hidden" id="mainContent">
    <?php include $_view_obj->compile("main_header.html"); ?>
    
    <!-- 内容区域 -->
    <div class="flex-1 overflow-y-auto p-6 scrollbar-thin">
        <div class="bg-white rounded-xl shadow-sm border border-neutral-200 mb-6 overflow-hidden">
            <div class="p-5 border-b border-neutral-200">
                <div class="flex flex-wrap items-center justify-between gap-4">
                    <h3 class="font-bold text-lg">敏感词库管理</h3>
                    
                    <div class="flex flex-wrap items-center gap-3">
                        <div class="relative">
                            <select class="appearance-none bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" id="wordTypeFilter">
                                <option value="">全部类型</option>
                                <option value="1">色情低俗</option>
                                <option value="2">暴力恐怖</option>
                                <option value="3">政治敏感</option>
                                <option value="4">辱骂攻击</option>
                                <option value="5">广告营销</option>
                                <option value="6">其他</option>
                            </select>
                            <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                        </div>

                        <div class="relative">
                            <select class="appearance-none bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" id="levelFilter">
                                <option value="">全部级别</option>
                                <option value="1">低</option>
                                <option value="2">中</option>
                                <option value="3">高</option>
                            </select>
                            <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                        </div>
                        
                        <div class="relative">
                            <select class="appearance-none bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" id="statusFilter">
                                <option value="">全部状态</option>
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                            <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                        </div>
                        
                        <div class="relative">
                            <select class="appearance-none bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" id="matchModeFilter">
                                <option value="">全部匹配模式</option>
                                <option value="1">精确匹配</option>
                                <option value="2">模糊匹配</option>
                            </select>
                            <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                        </div>
                        
                        <button class="bg-primary hover:bg-primary/90 text-white text-sm px-4 py-2 rounded-lg transition-colors" id="filterBtn">
                            <i class="fa fa-filter mr-1"></i> 筛选
                        </button>
                        
                        <button class="bg-neutral-100 hover:bg-neutral-200 text-neutral-700 text-sm px-4 py-2 rounded-lg transition-colors" id="resetBtn">
                            <i class="fa fa-refresh mr-1"></i> 重置
                        </button>
                        
                        <button class="bg-success hover:bg-success/90 text-white text-sm px-4 py-2 rounded-lg transition-colors" id="addWordBtn">
                            <i class="fa fa-plus mr-1"></i> 添加敏感词
                        </button>
                    </div>
                </div>
                
                <div class="mt-4">
                    <label class="block text-xs text-neutral-500 mb-1">敏感词内容/别名</label>
                    <div class="flex space-x-3">
                        <input type="text" class="flex-1 bg-neutral-100 border border-neutral-200 text-sm rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" id="keywordSearch" placeholder="请输入敏感词内容或别名进行搜索">
                        <button class="bg-primary hover:bg-primary/90 text-white text-sm px-4 py-2 rounded-lg transition-colors" id="searchBtn">
                            <i class="fa fa-search mr-1"></i> 搜索
                        </button>
                    </div>
                </div>
            </div>

            <!-- 批量操作工具栏 -->
            <div class="p-5 border-b border-neutral-200 flex flex-wrap items-center justify-between gap-4">
                <div class="flex items-center space-x-3">
                    <button class="bg-primary hover:bg-primary/90 text-white text-sm px-4 py-2 rounded-lg transition-colors" id="batchEnableBtn" disabled>
                        <i class="fa fa-check-circle mr-1"></i> 批量启用
                    </button>
                    <button class="bg-neutral-100 hover:bg-neutral-200 text-neutral-700 text-sm px-4 py-2 rounded-lg transition-colors" id="batchDisableBtn" disabled>
                        <i class="fa fa-ban mr-1"></i> 批量禁用
                    </button>
                    <button class="bg-danger hover:bg-danger/90 text-white text-sm px-4 py-2 rounded-lg transition-colors" id="batchDeleteBtn" disabled>
                        <i class="fa fa-trash mr-1"></i> 批量删除
                    </button>
                    <span class="text-sm text-neutral-500 ml-3" id="selectedCount">已选择 0 项</span>
                </div>
                
                <!-- <div>
                    <button class="bg-neutral-100 hover:bg-neutral-200 text-neutral-700 text-sm px-4 py-2 rounded-lg transition-colors" id="importBtn">
                        <i class="fa fa-upload mr-1"></i> 导入
                    </button>
                    <button class="bg-neutral-100 hover:bg-neutral-200 text-neutral-700 text-sm px-4 py-2 rounded-lg transition-colors" id="exportBtn">
                        <i class="fa fa-download mr-1"></i> 导出
                    </button>
                </div> -->
            </div>
            
            <!-- 敏感词列表 -->
            <div class="overflow-x-auto">
                <table class="w-full" id="sensitiveWordTable">
                    <thead>
                        <tr class="bg-neutral-50 text-left">
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                <input type="checkbox" id="selectAll" class="rounded border-neutral-300 text-primary focus:ring-primary">
                            </th>
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">ID</th>
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">敏感词内容</th>
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">别名</th>
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">敏感类型</th>
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">敏感级别</th>
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">匹配模式</th>
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">替换字符串</th>
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">适用范围</th>
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">状态</th>
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">添加时间</th>
                            <th class="px-5 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-neutral-200 bg-white" id="sensitiveWordTableBody">
                        <!-- 表格内容将通过JS动态生成 -->
                    </tbody>
                </table>
            </div>
            
            <!-- 分页 -->
            <div class="px-5 py-4 border-t border-neutral-200 flex items-center justify-between">
                <div class="text-sm text-neutral-500 pagenation">
                    显示 1 至 10 条，共 128 条
                </div>
                <div class="flex space-x-1" id="paginationContainer">
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 text-neutral-400 hover:border-primary hover:text-primary disabled:opacity-50" disabled>
                        <i class="fa fa-angle-left"></i>
                    </button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-primary bg-primary text-white">1</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 hover:border-primary hover:text-primary">2</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 hover:border-primary hover:text-primary">3</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 hover:border-primary hover:text-primary">4</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 hover:border-primary hover:text-primary">5</button>
                    <button class="w-8 h-8 flex items-center justify-center rounded border border-neutral-200 hover:border-primary hover:text-primary">
                        <i class="fa fa-angle-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 添加/编辑敏感词模态框 -->
<div class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center" id="wordModal">
    <div class="bg-white rounded-xl w-full max-w-2xl p-6">
        <h3 class="text-lg font-bold mb-4" id="modalTitle">添加敏感词</h3>
        
        <form id="wordForm">
            <input type="hidden" id="wordId">
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium mb-1" for="word">敏感词内容 <span class="text-danger">*</span></label>
                    <input type="text" id="word" name="word" class="w-full border border-neutral-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" required>
                </div>
                
                <div>
                    <label class="block text-sm font-medium mb-1" for="wordType">敏感类型 <span class="text-danger">*</span></label>
                    <div class="relative">
                        <select id="wordType" name="wordType" class="appearance-none w-full border border-neutral-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" required>
                            <option value="">请选择敏感类型</option>
                            <option value="1">色情低俗</option>
                            <option value="2">暴力恐怖</option>
                            <option value="3">政治敏感</option>
                            <option value="4">辱骂攻击</option>
                            <option value="5">广告营销</option>
                            <option value="6">其他</option>
                        </select>
                        <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                    </div>
                </div>
                
                <div>
                    <label class="block text-sm font-medium mb-1" for="level">敏感级别 <span class="text-danger">*</span></label>
                    <div class="relative">
                        <select id="level" name="level" class="appearance-none w-full border border-neutral-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" required>
                            <option value="1">低</option>
                            <option value="2" selected>中</option>
                            <option value="3">高</option>
                        </select>
                        <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                    </div>
                </div>
                
                <div>
                    <label class="block text-sm font-medium mb-1" for="matchMode">匹配模式 <span class="text-danger">*</span></label>
                    <div class="relative">
                        <select id="matchMode" name="matchMode" class="appearance-none w-full border border-neutral-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" required>
                            <option value="1" selected>精确匹配</option>
                            <option value="2">模糊匹配</option>
                        </select>
                        <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                    </div>
                </div>
                
                <div>
                    <label class="block text-sm font-medium mb-1" for="replaceStr">替换字符串</label>
                    <input type="text" id="replaceStr" name="replaceStr" value="*" class="w-full border border-neutral-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                </div>
                
                <div>
                    <label class="block text-sm font-medium mb-1" for="status">状态 <span class="text-danger">*</span></label>
                    <div class="relative">
                        <select id="status" name="status" class="appearance-none w-full border border-neutral-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" required>
                            <option value="1" selected>启用</option>
                            <option value="0">禁用</option>
                        </select>
                        <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 text-xs pointer-events-none"></i>
                    </div>
                </div>
            </div>
            
            <div class="mb-4">
                <label class="block text-sm font-medium mb-1" for="wordAlias">敏感词别名（同义词/变体，逗号分隔）</label>
                <textarea id="wordAlias" name="wordAlias" rows="2" class="w-full border border-neutral-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="多个别名请用逗号分隔"></textarea>
            </div>
            
            <div class="mb-4">
                <label class="block text-sm font-medium mb-1" for="businessScope">适用业务范围（如"评论/昵称/内容"，逗号分隔）</label>
                <input type="text" id="businessScope" name="businessScope" class="w-full border border-neutral-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="例如：评论/昵称/内容">
            </div>
            
            <div class="mb-6">
                <label class="block text-sm font-medium mb-1" for="remark">备注说明（如添加原因）</label>
                <textarea id="remark" name="remark" rows="3" class="w-full border border-neutral-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="请输入备注信息"></textarea>
            </div>
            
            <div class="flex space-x-3">
                <button type="button" class="flex-1 py-2 border border-neutral-200 rounded-lg hover:bg-neutral-50 transition-colors" id="cancelWordBtn">取消</button>
                <button type="submit" class="flex-1 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors" id="saveWordBtn">保存</button>
            </div>
        </form>
    </div>
</div>

<!-- 确认操作模态框 -->
<div class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center" id="confirmModal">
    <div class="bg-white rounded-xl w-full max-w-md p-6">
        <h3 class="text-lg font-bold mb-2" id="confirmTitle">确认删除</h3>
        <p class="text-neutral-500 mb-6" id="confirmMessage">您确定要删除选中的敏感词吗？此操作不可撤销。</p>
        <div class="flex space-x-3">
            <button class="flex-1 py-2 border border-neutral-200 rounded-lg hover:bg-neutral-50 transition-colors" id="cancelConfirmBtn">取消</button>
            <button class="flex-1 py-2 bg-danger text-white rounded-lg hover:bg-danger/90 transition-colors" id="doConfirmBtn">确认</button>
        </div>
    </div>
</div>

<!-- 导入敏感词模态框 -->
<div class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center" id="importModal">
    <div class="bg-white rounded-xl w-full max-w-md p-6">
        <h3 class="text-lg font-bold mb-4">导入敏感词</h3>
        
        <div class="mb-4">
            <p class="text-sm text-neutral-500 mb-3">请上传CSV格式文件，格式要求：敏感词,类型,级别,匹配模式,替换字符串,别名</p>
            <p class="text-xs text-neutral-400 mb-4">类型：1-色情低俗；2-暴力恐怖；3-政治敏感；4-辱骂攻击；5-广告营销；6-其他<br>
            级别：1-低；2-中；3-高<br>
            匹配模式：1-精确匹配；2-模糊匹配</p>
            
            <div class="border-2 border-dashed border-neutral-300 rounded-lg p-6 text-center hover:border-primary transition-colors cursor-pointer" id="uploadArea">
                <i class="fa fa-cloud-upload text-3xl text-neutral-400 mb-2"></i>
                <p class="text-sm text-neutral-500">点击或拖拽文件到此处上传</p>
                <input type="file" id="fileUpload" accept=".csv" class="hidden">
            </div>
            
            <div class="mt-4 hidden" id="fileInfo">
                <div class="flex items-center justify-between bg-neutral-50 p-3 rounded-lg">
                    <div class="flex items-center">
                        <i class="fa fa-file-text-o text-neutral-500 mr-2"></i>
                        <span class="text-sm" id="fileName">filename.csv</span>
                    </div>
                    <button class="text-neutral-400 hover:text-danger" id="removeFile">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <div class="flex space-x-3">
            <button class="flex-1 py-2 border border-neutral-200 rounded-lg hover:bg-neutral-50 transition-colors" id="cancelImportBtn">取消</button>
            <button class="flex-1 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors" id="confirmImportBtn">确认导入</button>
        </div>
    </div>
</div>

<script src="/i/js/sensitive.word.js"></script>
